/**
 * create by young (young2f@outlook.com) on 2020/9/16
 * 选择辅料
 */


'use strict';
import React from 'react';
import {Button, Card, Form, Icon, Modal, Tabs, Upload} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';

import {ModalFooter} from "antd-extra";
import ModelDescriptionGroup from "../../../components/ModelDescriptionGroup";
import ViewTitle from "../../../components/ViewTitle";
import notify from "../../../components/NotificationExtra";

const {TabPane} = Tabs;
moment.locale('zh-cn');
const table = 'Payment';
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            finance,
            store
          }) => ({...user, ...finance, ...dynamicLabel, ...global, ...store}))
export default class ModalPaymentRecordDetail extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {values = {}} = this.props;
    const {code} = values;
    this.props.dispatch({
      type: 'finance/findRecord',
      payload: {code, table}
    });
  }

  renderFoot = () => {
    const {foot, value, modalRef, isReview = false, callback, record = {}} = this.props;
    const {isEnd, code} = record;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          {!isReview && isEnd === '未结单' && <Button type={'primary'} onClick={() => {
            const {voucherFileList} = this.state;
            if (!voucherFileList) {
              callback();
              modalRef.close();
              return;
            }
            record.voucherFileList = voucherFileList;
            record.oldAmount = record.paymentAmount;
            this.props.dispatch({
              type: 'finance/updateRecord',
              payload: record
            }).then(res => {
              this.requestReturn(res);
              callback();
              modalRef.close();
            });

          }}>确定</Button>}
          <Button onClick={() => {
            callback();
            modalRef.close();
          }}>关闭</Button>
        </ModalFooter>
      );
    }
  };
  getCard = (files) => {
    const temp = [];
    _.map(files, file => {
      temp.push(<Card
        hoverable
        style={{width: 640}}
        cover={<img alt="example" src={file.preview}/>}
      >

      </Card>);
    });
    return temp;
  };
  picHandlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
      console.log(file.preview);
    }
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true
    });
  };
  picHandleChange = ({fileList}) => {
    _.map(fileList, async file => {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
        //file.thumbUrl = file.response ? file.response.data : fileList.file.thumbUrl;
      }
    });
    const temp = this.state;
    temp.voucherFileList = fileList;
    this.setState({...temp});
  };

  render() {
    const {style, record = {}, model, isReview = false, callback} = this.props;
    const {fileList,reviewStatus} = record;

    const {
      voucherFileList = record.voucherFileList ? record.voucherFileList : [],
      previewVisible,
      previewImage
    } = this.state;
    console.log('review status', reviewStatus);
    return (
      <div style={{...style}}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="详情" key="1">
            <ViewTitle
              title={"付款记录详情"}
              actions={[
                isReview && <Button disabled={reviewStatus === '同意'} type="primary" onClick={() => {
                  record.reviewStatus = '同意';
                  this.props.dispatch({
                    type: 'finance/updateRecord',
                    payload: record
                  }).then(res => {
                    this.componentDidMount();
                    callback();
                  });
                }}>同意</Button>,
                isReview && <Button disabled={reviewStatus === '驳回'} onClick={() => {
                  record.reviewStatus = '驳回';
                  this.props.dispatch({
                    type: 'finance/updateRecord',
                    payload: record
                  }).then(res => {
                    this.componentDidMount();
                    callback();
                  });
                }}>驳回</Button>
              ]}
            ></ViewTitle>
            <ModelDescriptionGroup
              model={model}
              values={record}
            ></ModelDescriptionGroup>
            {
              this.getCard(fileList)
            }
          </TabPane>
          <TabPane tab="凭证" key="2">
            <ViewTitle
              title={"付款凭证"}
              actions={[
                isReview && <Button type="primary" onClick={() => {
                  record.isEnd = '已结单';
                  this.props.dispatch({
                    type: 'finance/updateRecord',
                    payload: record
                  }).then(res => {
                    this.requestReturn(res);
                    this.componentDidMount();
                    callback();
                  });
                }}>凭证核验</Button>,
                isReview && <Button onClick={() => {
                  record.reviewStatus = '未结单';
                  this.props.dispatch({
                    type: 'finance/updateRecord',
                    payload: record
                  }).then(res => {
                    this.requestReturn(res);
                    this.componentDidMount();
                    callback();
                  });
                }}>驳回</Button>
              ]}
            ></ViewTitle>
            {isReview && this.getCard(voucherFileList)}
            {!isReview && <div style={{marginLeft: '64px'}}>
              <Upload
                action={'http://127.0.0.1:18008/api/global/upload?type=inboundLot'} // 没有用，直接存图片流文件
                listType="picture-card"
                fileList={voucherFileList}
                accept={".png,.jpg"}
                onPreview={this.picHandlePreview}
                onChange={this.picHandleChange}
                onDownload={file => {
                  console.log('ondownlad', file);
                }}
                beforeUpload={(file, fileList) => {
                  const isLt2M = file.size / 1024 / 1024 < 2;
                  if (!isLt2M) {
                    notify({type: 'error', message: '文件过大！'});
                    return isLt2M;
                  }
                  return false;
                }}
              >
                {<div>
                  <Icon type="plus"/>
                  <div className="ant-upload-text">上传图片</div>
                </div>}
              </Upload>
              <Modal visible={previewVisible} footer={null} onCancel={() => {
                this.setState({previewVisible: false});
              }}>
                <img alt="example" style={{width: '100%'}} src={previewImage}/>
              </Modal>
            </div>
            }
          </TabPane>
        </Tabs>
        {this.renderFoot()}
      </div>

    );
  }
}

